<html>
<head>
    <meta charset="UTF-8"/>
    <title>升学率</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.highcharts.com.cn/highcharts/8.1.2/highcharts.js"></script>

    <script src="Vue/Vue.js"></script>
    <script src="Vue/axios.js"></script>
</head>
<body>
<div id="app">
    升学年份：<input type="text" v-model="year"/>
    <button type="button" @click="getAllTypeEnroll">确认</button>
    <br/>
    <div id="container" style="width: 550px; height: 400px; margin: 0 auto;"></div>
    <div id="containerNum" style="width: 550px; height: 400px; margin: 0 auto;"></div>
</div>

<script language="JavaScript">


    var storage = window.localStorage;
    var token = storage.getItem("token");
    var refreshToken = storage.getItem("refreshToken");
    console.log(refreshToken)

    var json = {};
    // 图是柱形图
    var chart = {
        type: 'column'
    };
    // 主标题
    var title = {
        text: '各校区升学率对比'
    };

    var titleNum = {
        text: '各校区录取人数对比'
    };
    // X 轴

    // Y轴
    var yAxis = {
        min: 0,
        title: {
            text: ''
        }
    };
    // 提示语
    var tooltip = {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.2f}%)<br/>',
        shared: true
    };

    var tooltipNum = {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}人)<br/>',
        shared: true
    };

    // 按百分比显示
    var plotOptions = {
        column: {
            stacking: 'percent'
        }
    };
    //柱状图显示
    var plotOptionsNum = {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    };

    var credits = {
        enabled: false
    };

    json.chart = chart;
    json.yAxis = yAxis;
    json.credits = credits;

    new Vue({
        el: "#app",
        data: {
            year: "2019"
        },
        mounted() {

            axios.get(
                "/principal/all/" + this.year, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }
            ).then(res => {
                if (res.data.code == 200) {
                    console.log(res.data.data.categories)
                    console.log(res.data.data.allTypeEnroll)
                    json.xAxis = res.data.data.categories // X 轴
                    json.series = res.data.data.allTypeEnroll// 数据
                    json.title = title;
                    json.tooltip = tooltip;
                    json.plotOptions = plotOptions;
                    $('#container').highcharts(json);
                    json.title = titleNum;
                    json.tooltip = tooltipNum;
                    json.plotOptions = plotOptionsNum;
                    $('#containerNum').highcharts(json);
                } else if (res.data.code == 500) {
                    console.log("你没有权限")
                    $("#app").html("无权限访问")
                } else if(res.data.code == 302){
                    window.parent.location.href="login.html";
                }

            })
        },
        methods: {
            getAllTypeEnroll: function () {

                axios.get(
                    "/principal/all/" + this.year, {
                        headers: {
                            "token": token,
                            "refreshToken": refreshToken
                        }
                    }
                ).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data.data.categories)
                        console.log(res.data.data.allTypeEnroll)
                        json.xAxis = res.data.data.categories // X 轴
                        json.series = res.data.data.allTypeEnroll// 数据
                        json.title = title;
                        json.tooltip = tooltip;
                        json.plotOptions = plotOptions;
                        $('#container').highcharts(json);
                        json.title = titleNum;
                        json.tooltip = tooltipNum;
                        json.plotOptions = plotOptionsNum;
                        $('#containerNum').highcharts(json);
                    } else if (res.data.code == 500) {
                        console.log("你没有权限")
                        $("#app").html("无权限访问")
                    } else if(res.data.code == 302){
                        window.parent.location.href="login.html";
                    }
                })

            }

        }

    })
</script>
</body>
</html>
